<!-- directive:title AngularJS中，如何给动态生成的元素绑定事件 -->
<!-- directive:breadcrumb AngularJS中，如何给动态生成的元素绑定事件 -->
<div class='panel-body'>
    <article class="docs-content">
        <p>我们知道在jquery中，动态生成一个元素，如果要在动态生成元素的同时，动态绑定事件，可以通过live/on方法（在jquery3.0中已经废除了bind方法）。 </p>
        <p>在angularjs中，操作DOM一般在指令中完成，事件监听机制是在对于已经静态生成的dom绑定事件，而如果在指令中动态生成了DOM节点，动态生成的节点不会被JS事件监听。</p>
        <p>但是如果不做处理，这里的ng-model并不能实现，因为事件的监听在静态html页面生成时候已经完成。那么如何给动态生成的元素，绑定事件，实现事件的动态监听呢？</p>
        <p>通过<code>$compile</code>服务，<code>编译DOM</code>，实现动态的事件绑定</p>
        <script type="text/xianjs" ui-bs>
            app.directive('select2', function ($timeout, $ocLazyLoad, $compile, MODULE_CONFIG) {
                return {
                    link: function (scope, $element, attrs) {
                        var template = '<input type="text" ng-model="ngModel"'
                        var input = $compile(template)(scope);
                    }
                }
            });
        </script>
        <p>或者使用<code>$eval</code>方法 直接<code>编译执行</code></p>
        <script type="text/xianjs" ui-bs>
            .directive('myCustomSetText', function () {
                return {
                    link:function (scope, elem, attr, ctrl) {
                        elem.text(scope.$eval(attr.myCustomSetText));
                    }
                }
            });
        </script>
    </article>
</div>
